body {
  font-family: 'Roboto', sans-serif;
  background-color: #7e9cb44f;
  color: #01082f;
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 5em;
}

span.weather-icon {
    font-size: 1em;
}

span.weather-degrees {
    font-size: 5em;
}


#weather-card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: #7e9db4;
}

#weather-card h2 {
    padding: .5em;
}

/* On mouse-over, add a deeper shadow */
#weather-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.weather-container {
    background-color: #f8f3f3;
    padding: 2px 16px;
}

.weather-container p {
  padding: 2em;
}
